<script setup>
	import { ref } from 'vue'
	const isNo = ref('')
	const tabStatus = ref('noused')
	const history = ref('1')
</script>

<template>
	<view class="select">
		<view :class="tabStatus == 'noused' ? 'select-tab' : 'no-select-tab'" @click="tabStatus = 'noused'">
			<view class="select-title">待使用</view>
			<view class="underline"></view>
		</view>
		<view :class="tabStatus == 'used' ? 'select-tab' : 'no-select-tab'" @click="tabStatus = 'used'">
			<view class="select-title">已使用</view>
			<view class="underline"></view>
		</view>
	</view>
	<view class="viewport" v-if="tabStatus == 'noused'">
		<uni-card title="预约信息" v-if="isNo">
			<view class="myyy-comment">
				<view style="padding: 10px;">
					<view>预约日期：2025-03-17</view>
					<view>到店时间：上午</view>
					<view>预约项目：烫发</view>
					<view>留言信息：顾客留言信息</view>
				</view>
				<image src="/static/myyy/ewm.png"></image>
			</view>
		</uni-card>
		<uni-card title="预约信息" v-else>
			<view class="myyy-emtpy">
				<view>暂无预约</view>
				<button class="loginbtn" type="submit" style="margin-bottom: 30rpx;">马上预约</button>
			</view>
		</uni-card>
	</view>
	<view class="viewport" v-else>
		<view v-if="history">
		    <view class="history" v-for="i in 13" :key="i">
		        <view class="history-comment">
		            <span class="title">预约项目：</span>烫发
		        </view>
				<view class="history-comment">
		            <span class="title">预约时间：</span>2025-03-11 10:11:23
		        </view>
				<view class="history-comment">
		            <span class="title">到店时间：</span>2025-03-11 11:24:31
		        </view>
				<view class="button">
					<button class="loginbtn" type="submit">再次预约</button>
				</view>
		    </view>
		</view>
		<view class="empty" v-else>
			<image src="/static/mypd/empty.png"></image>
			<view>暂无历史记录</view>
		</view>
	</view>
</template>

<style lang="scss">
	.select {
		height: 60px;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		.select-tab {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 35rpx;
			color: #00c8a4;
			.underline {
				margin-top: 10px;
				height: 2px;
				width: 80px;
				background-color: #00c8a4;
			}
		}
		.no-select-tab {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 35rpx;
			.underline {
				margin-top: 10px;
				height: 2px;
				width: 80px;
				background-color: #fff;
			}
		}
	}
	.viewport {
		width: 100%;
		// padding: 20px;
		.myyy-comment {
			// padding: 30rpx;
			height: 150px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			image {
				width: 150px;
				height: 150px;
			}
		}
		.myyy-emtpy {
			// padding: 30rpx;
			height: 150px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			.loginbtn {
				background-color: #00c8a4;
				margin: 30rpx 80rpx;
			}
		}
		.history {
			background-color: #ffff;
			border-radius: 15px;
			margin: 15px;
			padding: 15px;
			.history-comment {
				padding-bottom: 10px;
				.title {
					font-weight: bold;
				}
			}
			.button {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				.loginbtn {
					background-color: #00c8a4;
					width: 350px;
					// height: 40px;
				}
			}
		}
		.empty {
			width: 100%;
			display: flex;
			// justify-content: center;
			padding-top: 50px;
			flex-direction: column;
			align-items: center;
			image {
				width: 330rpx;
				height: 220rpx;
			}
		}
		::v-deep .uni-card__header-content-title {
		  // color: #ff0000 !important;      /* 修改标题颜色 */
		  font-size: 20px !important;      /* 修改标题字体大小 */
		  font-weight: bold;    /* 修改标题粗细 */
		}
	}
</style>
